<template>
  <el-container>
    <!-- menu的router属性:是否使用 vue-router的模式,启用该模式会在激活导航时以index作为path进行路由跳转 -->
    <el-aside width="200px">
      <el-menu
        router
        default-active="/index/home"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <!-- <el-menu-item index="/index/home">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>系统设置</span>
          </template>
          <el-menu-item index="/index/menu">菜单管理</el-menu-item>
          <el-menu-item index="/index/role">角色管理</el-menu-item>
          <el-menu-item index="/index/admin">管理员管理</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>商城设置</span>
          </template>
          <el-menu-item index="/index/categoods">商品分类</el-menu-item>
          <el-menu-item index="/index/goodsSpec">商品规格</el-menu-item>
          <el-menu-item index="3-3">商品管理</el-menu-item>
          <el-menu-item index="3-4">会员管理</el-menu-item>
          <el-menu-item index="3-5">轮播图管理</el-menu-item>
          <el-menu-item index="3-6">秒杀活动</el-menu-item>
        </el-submenu>

        </el-menu-item>
     -->
        <el-menu-item index="/index/home">
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <template v-for="item in user.menus">
          <el-submenu v-if="item.children" :key="item.id" :index="item.title">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item v-for="i in item.children" :key="i.id" :index="i.url">
              {{ i.title }}
            </el-menu-item>
          </el-submenu>
          <!-- 此处遍历没有children,即是菜单 -->
          <el-menu-item v-else :key="item.id" :index="item.url">
            {{ item.title }}
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header
        >{{ user.username }}
        <i class="el-icon-setting" @click="exit" style="cursor: pointer"></i
      ></el-header>
      <el-main>
        <!-- 二级路由出口 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index/home' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { successAlert } from "../../utils/alert";
export default {
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  methods: {
    ...mapActions({
      requestUser: "userActions",
    }),
    exit() {
      this.$confirm("确定要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 确定退出
          // 1.清空user
          this.requestUser(null);
          // 2.提示消息
          successAlert("退出成功");
          // 3.路由跳转
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    document.title = this.$route.meta.title;
    setTimeout(() => {
      console.log(this.user);
    }, 1000);
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: right;
  line-height: 60px;
}

.el-aside {
  background-color: #545c64;
  color: #333;
  height: 100vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  /* text-align: center;
  line-height: 160px; */
}
</style>